<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #efefef;
        padding: 10px 30px;
      }
      .update-wrap {
        background: #fff;
      }
      .header {
        padding: 20px 20px 20px 40px;
        position: relative;
        border-bottom: 1px solid #ddd;
      }
      .header::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 16px;
        background: blue;
        top: 25px;
        left: 20px;
      }
      .grid-wrap {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        justify-content: center;
      }
      .grid-item {
        display: flex;
        padding: 20px;
      }
      .grid-item:hover {
        cursor: pointer;
      }
      .content-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .content-wrap > div:first-child {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .content-wrap > div:first-child:hover {
        color: blue;
      }
      img {
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="update-wrap">
      <div class="header">最新更新</div>
      <div class="grid-wrap">
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
        <div class="grid-item">
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="100"
            height="100"
            style="margin-right: 10px"
          />
          <div class="content-wrap">
            <div>
              内容标题，最多显示两行内容标题内容标题内容内容标题，最多显示两行内容标题内容标题内容
            </div>
            <div>来源:品牌中心 2021-12-03</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
